<template>
  <div class="flow-dialog">
    <a-modal
      title-align="start"
      :title="title"
      :mask-closable="clickClose"
      :esc-to-close="pressEscape"
      :unmount-on-close="closeFree"
      :render-to-body="false"
      :visible="_value"
      :width="width"
    >
      <slot></slot>
      <template #footer v-if="showFooter">
        <a-button size="small" @click="handelCancel">{{ cancelText }}</a-button>
        <a-button size="small" type="primary" @click="handelConfirm">{{ okText }}</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

const emit = defineEmits(["update:modelValue", "confirm", "cancel"]);

const props = defineProps({
  modelValue: Boolean,
  clickClose: Boolean,
  pressEscape: Boolean,
  closeFree: Boolean,
  title: {
    type: String,
    default: ""
  },
  width: {
    type: String,
    default: "50%"
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  cancelText: {
    type: String,
    default: "取 消"
  },
  okText: {
    type: String,
    default: "确 定"
  },
  border: {
    type: Boolean,
    default: true
  }
});

const _value = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});

const handelConfirm = () => {
  emit("confirm");
};
const handelCancel = () => {
  _value.value = false;
  emit("cancel");
};
</script>

<style lang="scss" scoped>
.flow-dialog {
  :deep(.arco-modal-header) {
    padding: 10px 20px;
    border-bottom: 1px solid #e8e8e8;
    .arco-modal-title {
      font-size: 17px;
      font-weight: 400;
      color: #303133;
    }
    .arco-modal-close-btn {
      color: #909399;
    }
  }
  :deep(.arco-modal-body) {
    padding-bottom: 0;
  }
  :deep(.arco-modal-footer) {
    padding: 10px 20px;
    text-align: right;
  }
}

.border {
  :deep(.arco-modal-header) {
    border-bottom: 1px solid #e8e8e8;
  }
  :deep(.arco-modal-body) {
    padding: 20px;
  }
  :deep(.arco-modal-footer) {
    border-top: 1px solid #e8e8e8;
  }
}
</style>
